<template>
	<div id="app">
		<!-- 然后就可以批量呈现了 -->
		<img v-for="item in images" :src="item" height="150" alt="无法显示"/>
	</div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';

// 懒加载JavaScript
const lazyImportModules = import.meta.glob('./assets/js/*.js');

// 立即加载JavaScript
const eagerImportModules = import.meta.glob('./assets/js/*.js', { eager: true });

// 立即加载方式导入图片
const importImages = import.meta.glob('./assets/images/*', { eager: true });
// 存放批量导入的图片
const images = reactive([]);

onMounted(async () => {
	/*
	 * 打印各种批量导入的结果查看其结构
	 */
	// 打印懒加载模块
	console.log(lazyImportModules);
	// 打印立即加载模块
	console.log(eagerImportModules);
	// 打印立即加载的图片
	console.log(importImages);

	/*
	 * 调用懒加载结果
	 */
	// 调用懒加载的one模块import函数进行导入
	const lazyOneModule = await lazyImportModules['./assets/js/one.js']();
	// 调用导入后one模块进行打印
	lazyOneModule.default.print('这是one模块！');

	/*
	 * 调用立即加载结果
	 */
	// 调用立即加载的two模块的print函数
	eagerImportModules['./assets/js/two.js'].default.print('这是two模块！');

	/*
	 * 简化结果属性
	 */
	// 对批量导入存放模块的对象进行处理
	// 先获取其全部属性
	const keys = Object.keys(eagerImportModules);
	// 执行批量替换操作
	for (let path of keys) {
		// 裁剪字符串方式得到路径中的文件名（无扩展名）
		let name = path.substring(path.lastIndexOf('/') + 1, path.lastIndexOf('.js'));
		// 对原对象执行添加新的属性并删除旧属性达到处理效果
		eagerImportModules[name] = eagerImportModules[path].default;
		delete eagerImportModules[path];
	}
	// 调用模块one的print
	eagerImportModules.one.print('hello');
	// 打印模块two的name属性
	console.log(eagerImportModules.two.name);

	/*
	 * 处理导入的图片
	 */
	// 把导入的图片对象中每个default属性（对应实际导入的图片）取出来放到data中的变量images中去
	for (let path in importImages) {
		images.push(importImages[path].default);
	}
});
</script>